<template>
  <div class="weatherdetails" ref="homePage">
    <div class="bj">
      <van-nav-bar title="景区天气" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="language_box">
        <div class="language_div" @click="weather">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <div class="weather_txt">
             <div class="txt_weather">
               <span>欢乐谷游乐场</span>
               <span style="font-size: 12px;">空气质量</span>
               <span style="font-size: 12px;">湿度 60%</span>
             </div>
             <div class="qiyun">23°</div>
          </div>
        </div>
        <div class="language_div" @click="weather">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <div class="weather_txt">
             <div class="txt_weather">
               <span>欢乐谷游乐场</span>
               <span style="font-size: 12px;">空气质量</span>
               <span style="font-size: 12px;">湿度 60%</span>
             </div>
             <div class="qiyun">23°</div>
          </div>
        </div>
        <div class="language_div" @click="weather">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <div class="weather_txt">
             <div class="txt_weather">
               <span>欢乐谷游乐场</span>
               <span>空气质量</span>
               <span>湿度 60%</span>
             </div>
             <div class="qiyun">23°</div>
          </div>
        </div>
        <div class="language_div" @click="weather">
          <div class="language_img">
            <img src="../../assets/400.jpg"/>
          </div>
          <div class="weather_txt">
             <div class="txt_weather">
               <span>欢乐谷游乐场</span>
               <span>空气质量</span>
               <span>湿度 60%</span>
             </div>
             <div class="qiyun">23°</div>
          </div>
        </div>
    </div>

  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        input: '',

      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      weather() {
        this.$router.push({
          path: "/weather/weather",

        })
      },
    }
  }
</script>

<style lang="scss">
  .weatherdetails {
    background: white;
    .bj{
      .van-icon {
        color: white !important;
  
      }
    }
    .input{
      // width: 100%;
      // display: flex;
      // justify-content: center;
      // height: 40px;
      .van-search{
        width: 90% !important;
        height: 100%;
        border: 1px solid #46d0ca;
        padding: 0px;
        margin: 5px auto;
      }
    }
    .language_box{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .language_div{
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        width: 45%;
        height:220px;
        margin-top: 10px;
        .language_img{
          width: 100%;
          height:140px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .weather_txt{
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 14px;
  		  border: 1px solid #f0f0f0;
          .txt_weather{
            width: 70%;
            display: flex;
            flex-direction: column;
            height: 80px;
            padding: 10px;
            span{
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              // padding: px 0;
            }
          }
          .qiyun{
            font-size: 16px;
            display: flex;
            align-items: center;
            color: #46d0ca;
            padding: 0px 10px;
          }
        }
        // span{
        //   font-size: 16px;
        //   margin-top: 5px;
        // }
      }
    }
  
  
  
  }
</style>
